<template>
    <el-drawer :visible.sync="show" size="1000px;" :append-to-body="true">
        <div slot="title">
            <h4 style="margin-bottom: 0;font-weight: bold;"><el-tag style="margin-right: 10px;font-weight: normal;">代理</el-tag>
<!--                {{message.nickname}}-->
                <el-popover
                    placement="left"
                    title="推荐码"
                    trigger="hover">
                    <template #default>
                        <img :src="message.proxy_code" style="width: 200px" />
                    </template>
                    <el-button type="text" slot="reference">{{message.nickname}}</el-button>
                </el-popover>
            </h4>
        </div>
        <div class="detail_form">
            <el-card shadow="hover">
                <div slot="header">
                    <span style="font-weight: bold;">代理人信息</span>
                </div>
                <el-form label-width="80px" v-loading="loading">
                    <el-form-item label="用户id">{{we_id}}</el-form-item>
                    <el-form-item label="代理id">{{message.proxy_id}}</el-form-item>
                    <el-form-item label="微信昵称">{{message.nickname}}</el-form-item>
                    <el-form-item label="余额">{{message.wallet}}</el-form-item>
                    <el-form-item label="已领金额">{{message.total_withdraw}}</el-form-item>
                    <el-form-item label="总金额">{{message.total}}</el-form-item>
                    <el-form-item label="openid">{{message.openid}}</el-form-item>
                    <el-form-item label="手机">{{message.phone}}</el-form-item>
                </el-form>
            </el-card>
            <el-card shadow="hover" v-if="list.length">
                <div slot="header">
                    <span style="font-weight: bold;">推荐人（{{list.length}}人）</span>
                </div>
                <el-table :data="list" border stripe style="width: 100%" v-loading="loading">
                    <el-table-column prop="nickname" label="昵称">
                        <template slot-scope="scope">
                            <el-button type="text" @click="log(scope.row.we_id)">{{scope.row.nickname}}</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column prop="openid" label="openid"></el-table-column>
                    <el-table-column prop="count" label="返利次数"></el-table-column>
                    <el-table-column prop="proxy_price" label="返利总金额"></el-table-column>
                </el-table>
            </el-card>
            <el-card shadow="hover" v-if="withdraw.length">
                <div slot="header">
                    <span style="font-weight: bold;">提现记录（{{withdraw.length}}次）</span>
                </div>
                <el-table :data="withdraw" border stripe style="width: 100%" v-loading="loading">
                    <el-table-column prop="log_id" label="日志id"></el-table-column>
                    <el-table-column prop="mch_billno" label="mch_billno"></el-table-column>
                    <el-table-column prop="proxy_price" label="红包金额"></el-table-column>
                    <el-table-column prop="created_at" label="提现时间"></el-table-column>
                </el-table>
            </el-card>
        </div>
        <el-dialog title="返现详情" :visible.sync="dialogShow" append-to-body>
            <el-table :data="detail">
                <el-table-column property="log_id" label="log_id"></el-table-column>
                <el-table-column property="type_name" label="购买类型"></el-table-column>
                <el-table-column property="payment" label="支付金额"></el-table-column>
                <el-table-column property="proxy_price" label="代理金额"></el-table-column>
                <el-table-column property="created_at" label="返现时间"></el-table-column>
            </el-table>
        </el-dialog>
    </el-drawer>
</template>

<script>
    export default {
        name: "ProxyDetailDialog",
        data() {
            return {
                show: false,
                dialogShow:false,
                we_id: null,
                message: {
                    nickname:'',
                },
                list: [],
                withdraw:[],
                loading:false,
                detail:[],
            }
        },
        methods: {
            init(we_id) {
                this.we_id = we_id;
                this.loadData();
                this.show = true;
            },
            loadData() {
                this.loading = true;
                this.post('/api/laifei/settlement/proxy/detail', {we_id: this.we_id}).then(result => {
                    if (result.code === 0) {
                        this.message = result.data.message;
                        this.list = result.data.list;
                        this.withdraw = result.data.withdraw;
                    } else {
                        this.$message.error(result.msg);
                    }
                    this.loading = false;
                })
            },
            refresh() {
                this.loadData();
                this.$emit('refresh');
            },
            log(we_id){
                const loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                this.post('/api/laifei/settlement/proxy/log',{we_id:we_id}).then(result=>{
                    if (result.code === 0) {
                        this.detail = result.data;
                        this.dialogShow = true;
                    } else {
                        this.$message.error(result.msg);
                    }
                    loading.close();
                })
            },
        }
    }
</script>

<style>
    .detail_form{
        padding: 0 10px;
    }
    .detail_form .el-card{
        margin-bottom: 10px;
    }
    .detail_form .el-form-item{
        margin-bottom: 0;
    }
    .detail_form .el-form{
        display: flex;
        flex-wrap: wrap;
    }
    .detail_form .el-form-item{
        flex: 0 0 33%;
    }
    .detail_form .el-card__header{
        padding: 8px 20px !important;
    }
    .box-card {
        width: 100%;
    }
</style>
